<script>
import getLoad from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import { showToast, showSuccessToast } from "vant";
import cropperComImg from "@/components/public/cropperComImg.vue";
import saveBtn from "@/components/public/saveBtn.vue";

import { Sendsms } from "@/http/api";
export default {
  components: {
    getLoad,
    getTimeOut,
    cropperComImg,
    saveBtn,
  },
  name: "",
  data() {
    return {
      showCont: false,
      showTimeOut: false,
      enterTypeShow: false,
      enterTypeArr: [
        { name: "企业单位", id: 0 },
        { name: "事业单位", id: 1 },
      ],
      enterTypeId: 0,
      enterUserShow: false,
      enterUserArr: [
        { name: "法定代表人", id: 0 },
        { name: "经办人", id: 1 },
      ],
      enterUserId: 0,
      formInfo: {
        enterType: "",
        enterUser: "",
        companyName: "",
        companyNum: "",
        adress: "",
        real_name: "",
        mobile: "",
        code: "",
        idcard: "",
        idcard_backimg: "",
        idcard_frontimg: "",
        idcard_comimg: "",
        idcard_fr_backimg: "",
        idcard_fr_frontimg: "",
        authImg: "",
      },
      personType: "本人",
      codeText: "获取验证码",
      isGetting: false, //是否正处于获取中
      timer: null,
    };
  },
  props: {},
  setup() {},
  methods: {
    enterUserSureFn() {
      this.formInfo.enterUser = this.enterUserArr[this.enterUserId].name;
      this.enterUserShow = false;
      //   this.startShowFn();
    },
    enterUserFn(item) {
      this.formInfo.enterUser = item.name;
      this.enterUserId = item.id;
    },
    enterTypeSureFn() {
      this.formInfo.enterType = this.enterTypeArr[this.enterTypeId].name;
      this.enterTypeShow = false;
      //   this.startShowFn();
    },
    enterTypeFn(item) {
      this.formInfo.enterType = item.name;
      this.enterTypeId = item.id;
    },
    getFrontFn(src) {
      this.formInfo.idcard_frontimg = src;
    },
    getBackFn(src) {
      this.formInfo.idcard_backimg = src;
    },
    getComImgFn(src) {
      this.formInfo.idcard_comimg = src;
    },
    getFRFrontFn(src) {
      this.formInfo.idcard_fr_frontimg = src;
    },
    getFRBackFn(src) {
      this.formInfo.idcard_fr_backimg = src;
    },
    getAuthFn(src) {
      this.formInfo.authImg = src;
    },

    // 获取验证码
    getCode() {
      let result = this.$converData.checkPhone(this.formInfo.mobile);
      if (!this.isGetting && result) {
        this.isGetting = true;
        let num = 60;
        this.getSendsms(this.formInfo.mobile);
        this.timer = setInterval(() => {
          if (num > 0) {
            num--;
            this.codeText = num + "s后重试";
          } else {
            this.codeText = "重新获取";
            this.isGetting = false;
            clearInterval(this.timer);
          }
        }, 1000);
      }
    },
    getSendsms(mobile) {
      let data = {
        mobile: mobile,
      };
      Sendsms(data)
        .then((res) => {
          if (res.data.code == 1) {
            showSuccessToast("获取成功");
          } else {
            showToast(res.data.msg);
            this.codeText = "重新获取";
            this.isGetting = false;
            clearInterval(this.timer);
          }
        })
        .catch((err) => {
          this.showLoad = false;
          this.codeText = "重新获取";
          this.isGetting = false;
          clearInterval(this.timer);
          showToast("请求超时");
        });
    },
    saveFn() {},
  },
  mounted() {},
  created() {
    this.showCont = true;
  },
};
</script>
<template>
  <div class="container">
    <div class="showCont" v-if="showCont && !showTimeOut">
      <div class="bannerCont">
        <img class="bannerImg" src="/img/signBanner.png" />
      </div>
      <div class="formCont">
        <div class="formTitle">录入信息</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">企业类型</div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="enterTypeShow = true"></div>
            <input v-model="formInfo.enterType" placeholder="请选择企业类型" />
          </div>
          <div @click="enterTypeShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">办理人员</div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="enterUserShow = true"></div>
            <input v-model="formInfo.enterUser" placeholder="请选择办理人员" />
          </div>
          <div @click="enterUserShow = true" class="iconfont icon-xiala"></div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle">单位信息</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">单位名称</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.real_name"
            maxlength="30"
            placeholder="请输入单位名称"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">统一信用代码</div>
          </div>
          <input
            class="inputText"
            type="text"
            v-model="formInfo.idcard"
            placeholder="请输入法人身份证号码"
          />
          <div
            v-if="$converData.checkIdCard(formInfo.idcard)"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">住址</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.adress"
            maxlength="10"
            placeholder="请输入客户住址"
          />
        </div>
        <div class="formTitle">营业执照/证书/文件</div>
        <div class="cardItem">
          <cropperComImg
            icon="icon-yingyezhizhao"
            tip="营业执照/证书/文件"
            @successCropper="getComImgFn"
          ></cropperComImg>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle">法定代表人信息</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">法人姓名</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.real_name"
            maxlength="10"
            placeholder="请输入法人姓名"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">法人手机号</div>
          </div>
          <input
            class="inputText"
            type="tel"
            v-model="formInfo.mobile"
            maxlength="11"
            placeholder="请输入法人手机号码"
          />
          <div
            v-if="$converData.checkPhone(formInfo.mobile)"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">验证码</div>
          </div>
          <input
            class="inputText"
            type="tel"
            v-model="formInfo.code"
            maxlength="6"
            placeholder="请输入验证码"
          />
          <div
            @click="getCode"
            :class="
              $converData.checkPhone(formInfo.mobile) && !isGetting
                ? 'getCode'
                : 'getCode disBtn'
            "
          >
            {{ codeText }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">法人身份证</div>
          </div>
          <input
            class="inputText"
            type="text"
            v-model="formInfo.idcard"
            placeholder="请输入法人身份证号码"
          />
          <div
            v-if="$converData.checkIdCard(formInfo.idcard)"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formTitle">证件信息</div>
        <div class="cardItem">
          <cropperComImg
            icon="icon-shenfenzhengzhengmian"
            tip="法人身份证人像面"
            @successCropper="getFRFrontFn"
          ></cropperComImg>
        </div>
        <div class="cardItem">
          <cropperComImg
            icon="icon-shenfenzhengbeimian"
            tip="法人身份证国徽面"
            @successCropper="getFRBackFn"
          ></cropperComImg>
        </div>
      </div>
      <div class="formCont" v-if="enterUserId == 1">
        <div class="formTitle">经办人信息</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">办理人员</div>
          </div>
          <input
            class="inputText"
            disabled
            v-model="personType"
            maxlength="10"
            placeholder="请输入办理人员"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">经办人姓名</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.real_name"
            maxlength="10"
            placeholder="请输入经办人姓名"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">经办人手机号</div>
          </div>
          <input
            class="inputText"
            type="tel"
            v-model="formInfo.mobile"
            maxlength="11"
            placeholder="请输入经办人手机号码"
          />
          <div
            v-if="$converData.checkPhone(formInfo.mobile)"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">经办人身份证</div>
          </div>
          <input
            class="inputText"
            type="text"
            v-model="formInfo.idcard"
            placeholder="请输入经办人身份证"
          />
          <div
            v-if="$converData.checkIdCard(formInfo.idcard)"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formTitle">证件信息</div>
        <div class="cardItem">
          <cropperComImg
            icon="icon-shenfenzhengzhengmian"
            tip="经办人身份证人像面"
            @successCropper="getFrontFn"
          ></cropperComImg>
        </div>
        <div class="cardItem">
          <cropperComImg
            icon="icon-shenfenzhengbeimian"
            tip="经办人身份证国徽面"
            @successCropper="getBackFn"
          ></cropperComImg>
        </div>
        <div class="cardItem">
          <cropperComImg
            type="image"
            icon="icon-qiyeshouquanshu-copy"
            tip="经办人授权书照片存储标识"
            @successCropper="getAuthFn"
          ></cropperComImg>
        </div>
      </div>
      <div class="saveBtn" @click="saveFn">保存信息</div>
    </div>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="enterTypeShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择企业类型</div>
        <div class="maskCheck">
          <div
            @click="enterTypeFn(item)"
            :class="
              item.id == enterTypeId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in enterTypeArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="enterTypeSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="enterUserShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择办理人员</div>
        <div class="maskCheck">
          <div
            @click="enterUserFn(item)"
            :class="
              item.id == enterUserId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in enterUserArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="enterUserSureFn">确认选择</div>
      </div>
    </van-popup>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #e7eeff;
  .showCont {
    box-sizing: border-box;
    padding-bottom: 0.75rem;
    .bannerCont {
      width: 100%;
      color: #fff;
      padding: 1rem 0 1.5rem;
      background-image: linear-gradient(to bottom, #98acf6, #e8ecfd);

      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .bannerImg {
        width: 100%;
      }
    }
    .formCont {
      background-color: #fff;
      width: 92%;
      margin: 0 auto;
      position: relative;
      top: -1rem;
      // margin-top: -6rem;
      padding: 1rem 4%;
      border-radius: 0.75rem;
      box-sizing: border-box;
      margin-bottom: 1rem;
      .formTitle {
        font-size: 0.7rem;
        font-weight: bold;
        margin-bottom: 1rem;
      }
      .cardItem {
        margin-top: 0.75rem;
      }
      .flexTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .addComp {
          font-size: 0.65rem;
          font-weight: normal;
          color: #86a9fb;
        }
        .formTitleMust {
          position: relative;
          display: flex;
          .mustIcon {
            font-size: 0.7rem;
            top: 0rem;
            left: -0.4rem;
            position: absolute;
            color: #ff5757;
          }
        }
      }
      .formInput {
        display: flex;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        background-color: #e7eeff;
        margin-bottom: 1rem;
        border-radius: 1.5rem;
        .inputName {
          width: 4.5rem;
          position: relative;
          .mustIcon {
            font-size: 0.7rem;
            top: 0rem;
            left: -0.4rem;
            position: absolute;
            color: #ff5757;
          }
        }
        .resultTag {
          color: #5cc78e;
          font-size: 0.8rem;
        }
        .icon-xiala {
          width: 1.5rem;
          font-size: 0.8rem;
          color: #ccc;
          text-align: center;
        }
        .inputOut {
          flex: 1;
          width: 3rem;
          position: relative;
          .inputMask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          input {
            width: 90%;
            border: none;
            background: none;
            outline: none;
          }
        }
        .inputText {
          flex: 1;
          width: 3rem;
          border: none;
          background: none;
          outline: none;
        }
        .getCode {
          color: #556dea;
          font-size: 0.6rem;
        }
        .disBtn {
          opacity: 0.5;
        }
      }
    }
    .saveBtn {
      width: 92%;
      margin: -1rem auto 0;
      text-align: center;
      line-height: 2.2rem;
      border-radius: 0.25rem;
      background-color: #556dea;
      color: white;
      font-size: 0.7rem;
    }
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 46%;
        text-align: center;
        background-color: #f6f7f9;
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
      }
      .maskCheckItemActive {
        background-color: #556dea;
        color: #fff;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.75rem 0;
      background-color: #556dea;
      border: 1px solid #556dea;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .disMaskBtn {
      opacity: 0.5;
    }
  }
}
</style>
